<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn">克隆</button>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // 节点的克隆(复制)
    // Element.cloneNode()    节点的克隆 => 返回克隆后的新节点
    // Element.cloneNode(false)  默认false 只克隆元素及其相关属性,不克隆子内容   (单一克隆)
    // Element.cloneNode(true)   既克隆元素及其相关属性,由克隆子内容    (批量复制)

    // 克隆的内容 默认也是存储在内存当中 => 放到页面中才会显示

    var wrap = document.getElementById("wrap");
    var list = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var btn = document.getElementsByClassName("btn")[0];



    // 点击新增按钮 克隆list 放到wrap中
    btn.onclick = function () {
        var copyList = list.cloneNode();
        var copyList = list.cloneNode(true);
        console.log(copyList);

        wrap.appendChild(copyList);
    }




</script>

</html>